<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttercup CRS Dashboard</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <h1 class="nav-title">Buttercup CRS Dashboard</h1>
            <div class="nav-buttons">
                <button id="submit-task-btn" class="btn btn-primary">Submit Task</button>
                <button id="refresh-btn" class="btn btn-secondary">Refresh</button>
            </div>
        </div>
    </nav>

    <main class="main-content">
        <!-- System Status Cards -->
        <section class="status-cards">
            <div class="card">
                <h3>Active Tasks</h3>
                <div class="stat-number" id="active-tasks">-</div>
                <div class="stat-label">Currently running</div>
            </div>
            <div class="card failed-tasks" disabled>
                <h3>Failed Tasks</h3>
                <div class="stat-number" id="failed-tasks">-</div>
                <div class="stat-label">CRS submissions failed</div>
            </div>
            <div class="card">
                <h3>Total PoVs</h3>
                <div class="stat-number" id="total-povs">-</div>
                <div class="stat-label">Vulnerabilities found</div>
            </div>
            <div class="card">
                <h3>Total Patches</h3>
                <div class="stat-number" id="total-patches">-</div>
                <div class="stat-label">Fixes generated</div>
            </div>
            <div class="card">
                <h3>Total Bundles</h3>
                <div class="stat-number" id="total-bundles">-</div>
                <div class="stat-label">Submissions made</div>
            </div>
        </section>

        <!-- Navigation Tabs -->
        <nav class="tab-navigation">
            <button class="tab-button active" data-tab="tasks">Tasks</button>
            <button class="tab-button" data-tab="povs">PoVs</button>
            <button class="tab-button" data-tab="patches">Patches</button>
        </nav>

        <!-- Tab Content -->
        <div class="tab-content">
            <!-- Tasks Tab -->
            <section id="tasks-tab" class="tab-pane active">
                <div class="section-header">
                    <h2>Tasks</h2>
                    <div class="filter-controls">
                        <select id="status-filter">
                            <option value="all">All Status</option>
                            <option value="active">Active</option>
                            <option value="expired">Expired</option>
                            <option value="failed">Failed</option>
                        </select>
                    </div>
                </div>
                <div class="tasks-container" id="tasks-container">
                    <!-- Tasks will be populated dynamically -->
                </div>
            </section>

            <!-- PoVs Tab -->
            <section id="povs-tab" class="tab-pane">
                <div class="section-header">
                    <h2>All PoVs</h2>
                </div>
                <div class="artifacts-container" id="povs-container">
                    <!-- PoVs will be populated dynamically -->
                </div>
            </section>

            <!-- Patches Tab -->
            <section id="patches-tab" class="tab-pane">
                <div class="section-header">
                    <h2>All Patches</h2>
                </div>
                <div class="artifacts-container" id="patches-container">
                    <!-- Patches will be populated dynamically -->
                </div>
            </section>
        </div>
    </main>

    <!-- Task Submission Modal -->
    <div id="task-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Submit New Task</h2>
                <span class="close" id="close-modal">&times;</span>
            </div>
            <form id="task-form">
                <div class="form-group">
                    <label for="task-name">Task Name:</label>
                    <input type="text" id="task-name" name="name" placeholder="Optional custom name">
                </div>
                <div class="form-group">
                    <label for="challenge-repo-url">Challenge Repository URL:</label>
                    <input type="url" id="challenge-repo-url" name="challenge_repo_url" required 
                           placeholder="https://github.com/user/repo.git">
                </div>
                <div class="form-group">
                    <label for="challenge-repo-head-ref">Challenge Repository Head Ref:</label>
                    <input type="text" id="challenge-repo-head-ref" name="challenge_repo_head_ref" required
                           placeholder="main or commit hash">
                </div>
                <div class="form-group">
                    <label for="challenge-repo-base-ref">Challenge Repository Base Ref:</label>
                    <input type="text" id="challenge-repo-base-ref" name="challenge_repo_base_ref"
                           placeholder="Optional base ref for delta analysis">
                </div>
                <div class="form-group">
                    <label for="fuzz-tooling-url">Fuzz Tooling URL:</label>
                    <input type="url" id="fuzz-tooling-url" name="fuzz_tooling_url" required
                           value="https://github.com/google/oss-fuzz" placeholder="https://github.com/google/oss-fuzz">
                </div>
                <div class="form-group">
                    <label for="fuzz-tooling-ref">Fuzz Tooling Ref:</label>
                    <input type="text" id="fuzz-tooling-ref" name="fuzz_tooling_ref" required
                           value="master" placeholder="master or commit hash">
                </div>
                <div class="form-group">
                    <label for="fuzz-tooling-project-name">Project Name:</label>
                    <input type="text" id="fuzz-tooling-project-name" name="fuzz_tooling_project_name" required
                           placeholder="libpng">
                </div>
                <div class="form-group">
                    <label for="harnesses-included">
                        <input type="checkbox" id="harnesses-included" name="harnesses_included" checked>
                        Harnesses Included
                    </label>
                </div>
                <div class="form-group">
                    <label for="duration">Duration (seconds):</label>
                    <input type="number" id="duration" name="duration" required min="60" max="86400" value="1800"
                           placeholder="1800">
                </div>
                <div class="form-buttons">
                    <button type="button" id="fill-example-btn" class="btn btn-success">Fill example-libpng Values</button>
                    <button type="button" id="cancel-btn" class="btn btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit Task</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Task Detail Modal -->
    <div id="detail-modal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h2 id="detail-title">Task Details</h2>
                <span class="close" id="close-detail-modal">&times;</span>
            </div>
            <div id="detail-content">
                <!-- Content will be populated dynamically -->
            </div>
        </div>
    </div>

    <!-- Notifications container -->
    <div id="notifications"></div>
    
    <script src="/static/script.js"></script>
</body>
</html>